<template>
  <div class="recharge-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <div class="header-icon">
          <el-icon><Wallet /></el-icon>
        </div>
        <div class="header-content">
          <h1>账户充值</h1>
          <p>为您的账户充值，享受更多优惠服务和专属福利</p>
        </div>
      </div>
      <div class="header-actions">
        <el-button
          size="large"
          @click="loadRechargeHistory"
          class="action-btn secondary"
        >
          <el-icon><Document /></el-icon>
          充值记录
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="refreshBalance"
          class="action-btn primary"
        >
          <el-icon><Refresh /></el-icon>
          刷新余额
        </el-button>
      </div>
      <div class="header-decoration">
        <div class="decoration-circle"></div>
        <div class="decoration-dots">
          <span v-for="i in 4" :key="i" class="dot"></span>
        </div>
      </div>
    </div>

    <!-- 当前余额显示 -->
    <div class="balance-section">
      <div class="balance-card">
        <div class="balance-header">
          <div class="balance-title">
            <el-icon><Wallet /></el-icon>
            <span>账户余额</span>
          </div>
          <el-button
            text
            @click="refreshBalance"
            class="refresh-btn"
          >
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
        <div class="balance-content">
          <div class="balance-amount">¥{{ formatBalance(userBalance) }}</div>
          <div class="balance-tips">
            <el-icon><InfoFilled /></el-icon>
            <span>余额可用于台球桌预订和其他服务</span>
          </div>
        </div>
        <div class="balance-decoration">
          <div class="decoration-pattern"></div>
        </div>
      </div>
    </div>

    <!-- 充值金额选择 -->
    <div class="amount-section">
      <div class="amount-card">
        <div class="amount-header">
          <div class="amount-title">
            <el-icon><Money /></el-icon>
            <span>选择充值金额</span>
          </div>
          <el-tag type="success" class="promo-tag">
            <el-icon><Present /></el-icon>
            充值即享优惠
          </el-tag>
        </div>

        <!-- 快捷金额选择 -->
        <div class="amount-grid">
          <div
            v-for="amount in quickAmounts"
            :key="amount.value"
            class="amount-item"
            :class="{
              active: selectedAmount === amount.value,
              recommended: amount.bonus && amount.bonus >= 30
            }"
            @click="selectAmount(amount.value)"
          >
            <div class="amount-header-item">
              <div class="amount-value">¥{{ amount.value }}</div>
              <div v-if="amount.bonus && amount.bonus >= 30" class="recommended-badge">
                推荐
              </div>
            </div>
            <div class="amount-bonus" v-if="amount.bonus">
              <div class="bonus-tag">
                <el-icon><Present /></el-icon>
                <span>送¥{{ amount.bonus }}</span>
              </div>
            </div>
            <div class="amount-desc">{{ amount.desc }}</div>
            <div class="amount-total" v-if="amount.bonus">
              实得：¥{{ amount.value + amount.bonus }}
            </div>
          </div>
        </div>

        <!-- 自定义金额输入 -->
        <div class="custom-amount">
          <div class="custom-divider">
            <span>或输入自定义金额</span>
          </div>
          <div class="custom-input-wrapper">
            <el-input
              v-model="customAmount"
              placeholder="请输入充值金额"
              type="number"
              :min="1"
              :max="10000"
              size="large"
              @input="handleCustomAmount"
              class="custom-input"
            >
              <template #prepend>
                <span class="input-prepend">¥</span>
              </template>
            </el-input>
          </div>
          <div class="amount-tips">
            <el-icon><InfoFilled /></el-icon>
            <span>单次充值金额范围：¥1 - ¥10,000</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付方式选择 -->
    <div class="payment-section">
      <div class="payment-card">
        <div class="payment-header">
          <div class="payment-title">
            <el-icon><CreditCard /></el-icon>
            <span>选择支付方式</span>
          </div>
          <div class="security-badge">
            <el-icon><Lock /></el-icon>
            <span>安全支付</span>
          </div>
        </div>

        <div class="payment-methods">
          <div
            v-for="method in paymentMethods"
            :key="method.id"
            class="payment-item"
            :class="{ active: selectedPayment === method.id }"
            @click="selectPayment(method.id)"
          >
            <div class="payment-icon">
              <div class="icon-wrapper" :class="method.id">
                <el-icon v-if="method.id === 'alipay'"><Money /></el-icon>
                <el-icon v-else-if="method.id === 'wechat'"><ChatDotRound /></el-icon>
                <el-icon v-else><CreditCard /></el-icon>
              </div>
            </div>
            <div class="payment-info">
              <div class="payment-name">{{ method.name }}</div>
              <div class="payment-desc">{{ method.desc }}</div>
            </div>
            <div class="payment-check">
              <div v-if="selectedPayment === method.id" class="check-icon">
                <el-icon><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 充值确认 -->
    <div class="confirm-section">
      <div class="confirm-card">
        <div class="confirm-header">
          <div class="confirm-title">
            <el-icon><DocumentChecked /></el-icon>
            <span>确认充值信息</span>
          </div>
        </div>

        <div class="confirm-content">
          <div class="confirm-info">
            <div class="confirm-row">
              <span class="label">充值金额</span>
              <span class="amount">¥{{ (finalAmount || 0).toFixed(2) }}</span>
            </div>
            <div class="confirm-row" v-if="bonusAmount > 0">
              <span class="label">赠送金额</span>
              <span class="bonus">
                <el-icon><Present /></el-icon>
                +¥{{ (bonusAmount || 0).toFixed(2) }}
              </span>
            </div>
            <div class="confirm-divider"></div>
            <div class="confirm-row total">
              <span class="label">到账金额</span>
              <span class="total-amount">¥{{ (totalAmount || 0).toFixed(2) }}</span>
            </div>
          </div>

          <el-button
            type="primary"
            size="large"
            :disabled="!canRecharge"
            :loading="recharging"
            @click="handleRecharge"
            class="recharge-btn"
          >
            <el-icon v-if="!recharging"><CreditCard /></el-icon>
            <el-icon v-else><Loading /></el-icon>
            {{ recharging ? '处理中...' : `立即充值 ¥${(finalAmount || 0).toFixed(2)}` }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 充值记录 -->
    <div class="history-section">
      <div class="history-card">
        <div class="history-header">
          <div class="history-title">
            <el-icon><List /></el-icon>
            <span>充值记录</span>
            <span class="record-count" v-if="rechargeHistory.length > 0">
              共 {{ rechargeHistory.length }} 条记录
            </span>
          </div>
          <el-button
            type="primary"
            @click="loadRechargeHistory"
            class="refresh-history-btn"
          >
            <el-icon><Refresh /></el-icon>
            刷新记录
          </el-button>
        </div>

        <div class="history-content">
          <div v-if="rechargeHistory.length > 0" class="table-container">
            <el-table
              :data="rechargeHistory"
              class="modern-table"
              :header-cell-style="{
                background: '#f8fafc',
                color: '#374151',
                fontWeight: '600',
                borderBottom: '2px solid #e2e8f0'
              }"
              :row-style="{ height: '60px' }"
            >
              <el-table-column prop="id" label="订单号" width="140" align="center">
                <template #default="scope">
                  <span class="order-id">#{{ scope.row.id }}</span>
                </template>
              </el-table-column>

              <el-table-column label="充值金额" width="120" align="center">
                <template #default="scope">
                  <div class="amount-cell">
                    <span class="amount-value">¥{{ scope.row.amount }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="赠送金额" width="120" align="center">
                <template #default="scope">
                  <div class="bonus-cell">
                    <span v-if="scope.row.bonus > 0" class="bonus-value">
                      <el-icon><Present /></el-icon>
                      +¥{{ scope.row.bonus }}
                    </span>
                    <span v-else class="no-bonus">-</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="paymentMethod" label="支付方式" width="120" align="center">
                <template #default="scope">
                  <div class="payment-method">
                    <el-icon v-if="scope.row.paymentMethod === 'alipay'"><Money /></el-icon>
                    <el-icon v-else-if="scope.row.paymentMethod === 'wechat'"><ChatDotRound /></el-icon>
                    <el-icon v-else><CreditCard /></el-icon>
                    <span>{{ getPaymentMethodName(scope.row.paymentMethod) }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态" width="100" align="center">
                <template #default="scope">
                  <div class="status-cell">
                    <div :class="['status-dot', scope.row.status]"></div>
                    <span :class="['status-text', scope.row.status]">
                      {{ getStatusText(scope.row.status) }}
                    </span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="createTime" label="充值时间" min-width="150">
                <template #default="scope">
                  <div class="time-cell">
                    <el-icon><Clock /></el-icon>
                    <span>{{ scope.row.createTime }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-else class="empty-history">
            <el-empty description="暂无充值记录">
              <el-button type="primary" @click="handleRecharge">
                立即充值
              </el-button>
            </el-empty>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, h } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '../store/modules/user';
import { rechargeBalance, getRechargeHistory, getUserBalance } from '../api/user';
import {
  Wallet,
  Refresh,
  Money,
  ChatDotRound,
  CreditCard,
  Check,
  Document,
  InfoFilled,
  Present,
  Lock,
  DocumentChecked,
  Loading,
  List,
  Clock
} from '@element-plus/icons-vue';

export default {
  name: 'Recharge',
  components: {
    Wallet,
    Refresh,
    Money,
    ChatDotRound,
    CreditCard,
    Check,
    Document,
    InfoFilled,
    Present,
    Lock,
    DocumentChecked,
    Loading,
    List,
    Clock
  },
  setup() {
    const userStore = useUserStore();

    // 响应式数据
    const userBalance = ref(0);
    const selectedAmount = ref(0);
    const customAmount = ref('');
    const selectedPayment = ref('alipay');
    const recharging = ref(false);
    const rechargeHistory = ref([]);

    // 快捷充值金额
    const quickAmounts = ref([
      { value: 50, desc: '适合短期使用' },
      { value: 100, bonus: 10, desc: '送10元，推荐' },
      { value: 200, bonus: 30, desc: '送30元，超值' },
      { value: 500, bonus: 100, desc: '送100元，最划算' },
      { value: 1000, bonus: 300, desc: '送300元，VIP专享' },
      { value: 2000, bonus: 800, desc: '送800元，土豪专属' }
    ]);

    // 支付方式
    const paymentMethods = ref([
      {
        id: 'alipay',
        name: '支付宝',
        desc: '安全便捷，推荐使用'
      },
      {
        id: 'wechat',
        name: '微信支付',
        desc: '微信扫码，快速支付'
      },
      {
        id: 'bank',
        name: '银行卡',
        desc: '支持各大银行卡'
      },
      {
        id: 'cash',
        name: '现金',
        desc: '线下现金支付'
      },
      {
        id: 'admin',
        name: '管理员充值',
        desc: '管理员手动充值'
      }
    ]);

    // 计算属性
    const finalAmount = computed(() => {
      return customAmount.value ? parseFloat(customAmount.value) || 0 : selectedAmount.value;
    });

    const bonusAmount = computed(() => {
      const amount = finalAmount.value;
      const quickAmount = quickAmounts.value.find(item => item.value === amount);
      return quickAmount?.bonus || 0;
    });

    const totalAmount = computed(() => {
      return finalAmount.value + bonusAmount.value;
    });

    const canRecharge = computed(() => {
      return finalAmount.value > 0 && selectedPayment.value && !recharging.value;
    });

    // 方法
    const formatBalance = (balance) => {
      const num = parseFloat(balance) || 0;
      return num.toFixed(2);
    };

    const refreshBalance = async () => {
      try {
        const response = await getUserBalance();
        if (response.success) {
          // 安全地转换余额为数字
          userBalance.value = parseFloat(response.data.balance) || 0;
          ElMessage.success('余额刷新成功');
        } else {
          ElMessage.error('刷新失败');
        }
      } catch (error) {
        console.error('刷新余额失败:', error);
        ElMessage.error('刷新失败');
      }
    };

    const selectAmount = (amount) => {
      selectedAmount.value = amount;
      customAmount.value = '';
    };

    const handleCustomAmount = (value) => {
      selectedAmount.value = 0;
      if (value && (parseFloat(value) < 1 || parseFloat(value) > 10000)) {
        ElMessage.warning('充值金额范围：¥1 - ¥10,000');
      }
    };

    const selectPayment = (paymentId) => {
      selectedPayment.value = paymentId;
    };

    const handleRecharge = async () => {
      if (!canRecharge.value) return;

      try {
        await ElMessageBox.confirm(
          `确认充值 ¥${finalAmount.value}${bonusAmount.value > 0 ? `，赠送 ¥${bonusAmount.value}` : ''}？`,
          '确认充值',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'info'
          }
        );

        // 如果是微信或支付宝支付，显示二维码
        if (selectedPayment.value === 'wechat' || selectedPayment.value === 'alipay') {
          showQRCodePayment();
        } else {
          // 其他支付方式的处理
          processOtherPayment();
        }

      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('充值失败，请重试');
        }
      }
    };

    // 显示二维码支付
    const showQRCodePayment = () => {
      const paymentName = selectedPayment.value === 'wechat' ? '微信支付' : '支付宝';
      const qrCodeUrl = generateQRCode();

      ElMessageBox({
        title: `${paymentName}扫码支付`,
        message: h('div', { style: 'text-align: center; padding: 20px;' }, [
          h('div', { style: 'margin-bottom: 20px; font-size: 16px; color: #303133;' },
            `请使用${paymentName}扫描下方二维码完成支付`),
          h('div', {
            style: 'width: 200px; height: 200px; margin: 0 auto 20px; border: 1px solid #dcdfe6; display: flex; align-items: center; justify-content: center; background: #f5f7fa;'
          }, [
            h('img', {
              src: qrCodeUrl,
              style: 'width: 180px; height: 180px;',
              alt: '支付二维码'
            })
          ]),
          h('div', { style: 'color: #909399; font-size: 14px; margin-bottom: 10px;' },
            `支付金额：¥${finalAmount.value}`),
          h('div', { style: 'color: #e6a23c; font-size: 12px;' },
            '请在5分钟内完成支付，超时订单将自动取消'),
          h('div', { style: 'margin-top: 20px;' }, [
            h('button', {
              style: 'background: #67c23a; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 10px;',
              onClick: () => {
                ElMessageBox.close();
                simulatePaymentSuccess();
              }
            }, '模拟支付成功'),
            h('button', {
              style: 'background: #f56c6c; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;',
              onClick: () => {
                ElMessageBox.close();
                ElMessage.info('支付已取消');
              }
            }, '取消支付')
          ])
        ]),
        showCancelButton: false,
        showConfirmButton: false,
        closeOnClickModal: false,
        customClass: 'qrcode-payment-dialog'
      });
    };

    // 生成二维码（模拟）
    const generateQRCode = () => {
      // 这里使用一个在线二维码生成服务作为示例
      const paymentInfo = {
        amount: finalAmount.value,
        orderId: `PAY${Date.now()}`,
        method: selectedPayment.value
      };
      const qrData = encodeURIComponent(JSON.stringify(paymentInfo));
      return `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${qrData}`;
    };

    // 模拟支付成功
    const simulatePaymentSuccess = async () => {
      recharging.value = true;

      try {
        // 调用真实的充值API
        const rechargeData = {
          amount: finalAmount.value,
          payment_method: selectedPayment.value,
          remark: `充值${finalAmount.value}元${bonusAmount.value > 0 ? `，赠送${bonusAmount.value}元` : ''}`
        };

        const response = await rechargeBalance(rechargeData);

        if (response.success) {
          // 刷新余额
          await refreshBalance();

          // 刷新充值记录
          await loadRechargeHistory();

          ElMessage.success(`充值成功！到账金额：¥${response.data.totalAmount}`);

          // 重置表单
          selectedAmount.value = 0;
          customAmount.value = '';
        } else {
          ElMessage.error(response.message || '充值失败');
        }

      } catch (error) {
        console.error('充值失败:', error);
        ElMessage.error('充值失败，请重试');
      } finally {
        recharging.value = false;
      }
    };

    // 处理其他支付方式
    const processOtherPayment = async () => {
      recharging.value = true;

      try {
        // 调用真实的充值API
        const rechargeData = {
          amount: finalAmount.value,
          payment_method: selectedPayment.value,
          remark: `充值${finalAmount.value}元${bonusAmount.value > 0 ? `，赠送${bonusAmount.value}元` : ''}`
        };

        const response = await rechargeBalance(rechargeData);

        if (response.success) {
          // 刷新余额
          await refreshBalance();

          // 刷新充值记录
          await loadRechargeHistory();

          ElMessage.success(`充值成功！到账金额：¥${response.data.totalAmount}`);

          // 重置表单
          selectedAmount.value = 0;
          customAmount.value = '';
        } else {
          ElMessage.error(response.message || '充值失败');
        }

      } catch (error) {
        console.error('充值失败:', error);
        ElMessage.error('充值失败，请重试');
      } finally {
        recharging.value = false;
      }
    };

    const getPaymentMethodName = (id) => {
      const method = paymentMethods.value.find(m => m.id === id);
      return method?.name || '未知';
    };

    const getStatusText = (status) => {
      const statusMap = {
        success: '成功',
        completed: '成功',
        pending: '处理中',
        failed: '失败',
        cancelled: '已取消'
      };
      return statusMap[status] || '未知';
    };

    const loadRechargeHistory = async () => {
      try {
        const response = await getRechargeHistory();
        if (response.success) {
          rechargeHistory.value = response.data.items || response.data.records || [];
        } else {
          ElMessage.error(response.message || '加载充值记录失败');
        }
      } catch (error) {
        console.error('加载充值记录失败:', error);
        ElMessage.error('加载充值记录失败');
      }
    };

    // 组件挂载时初始化数据
    onMounted(() => {
      refreshBalance();
      loadRechargeHistory();
    });

    return {
      userBalance,
      selectedAmount,
      customAmount,
      selectedPayment,
      recharging,
      rechargeHistory,
      quickAmounts,
      paymentMethods,
      finalAmount,
      bonusAmount,
      totalAmount,
      canRecharge,
      formatBalance,
      refreshBalance,
      selectAmount,
      handleCustomAmount,
      selectPayment,
      handleRecharge,
      getPaymentMethodName,
      getStatusText,
      loadRechargeHistory
    };
  }
};
</script>

<style scoped>
.recharge-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  background: #f8fafc;
  min-height: calc(100vh - 60px);
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  color: white;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1;
}

.header-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.header-content h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-actions {
  display: flex;
  gap: 16px;
  z-index: 1;
}

.action-btn {
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px);
}

.action-btn.primary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.action-btn.primary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

.header-decoration {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  z-index: 1;
}

.decoration-circle {
  width: 150px;
  height: 150px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: relative;
}

.decoration-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.decoration-dots .dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

.decoration-dots .dot:nth-child(2) {
  animation-delay: 0.5s;
}

.decoration-dots .dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* 余额区域 */
.balance-section {
  margin-bottom: 32px;
}

.balance-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.balance-title .el-icon {
  color: #667eea;
  font-size: 20px;
}

.refresh-btn {
  color: #64748b !important;
  font-size: 14px !important;
}

.refresh-btn:hover {
  color: #667eea !important;
}

.balance-content {
  text-align: center;
  padding: 20px 0;
}

.balance-amount {
  font-size: 48px;
  font-weight: 700;
  color: #059669;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(5, 150, 105, 0.1);
}

.balance-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.balance-tips .el-icon {
  color: #667eea;
}

.balance-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.05;
  pointer-events: none;
}

.decoration-pattern {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #667eea 0%, transparent 70%);
  border-radius: 50%;
}

/* 金额选择区域 */
.amount-section {
  margin-bottom: 32px;
}

.amount-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.amount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.amount-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.amount-title .el-icon {
  color: #667eea;
}

.promo-tag {
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}

.promo-tag .el-icon {
  margin-right: 4px;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.amount-item {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: white;
}

.amount-item:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
}

.amount-item.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 100%);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
}

.amount-item.recommended {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.amount-item.recommended:hover,
.amount-item.recommended.active {
  border-color: #f59e0b;
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.2);
}

.amount-header-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.amount-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
}

.recommended-badge {
  background: #f59e0b;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.amount-bonus {
  margin-bottom: 8px;
}

.bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #166534;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.bonus-tag .el-icon {
  font-size: 14px;
}

.amount-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}

.amount-total {
  font-size: 14px;
  font-weight: 600;
  color: #059669;
}

.custom-amount {
  margin-top: 24px;
}

.custom-divider {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.custom-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e2e8f0;
}

.custom-divider span {
  background: white;
  padding: 0 16px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.custom-input-wrapper {
  margin-bottom: 12px;
}

.custom-input {
  font-size: 18px !important;
}

.input-prepend {
  font-weight: 600;
  color: #667eea;
}

.amount-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.amount-tips .el-icon {
  color: #667eea;
}

/* 支付方式区域 */
.payment-section {
  margin-bottom: 32px;
}

.payment-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.payment-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.payment-title .el-icon {
  color: #667eea;
}

.security-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  color: #166534;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.security-badge .el-icon {
  font-size: 14px;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
}

.payment-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.payment-item.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 100%);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
}

.payment-icon {
  margin-right: 16px;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.icon-wrapper.alipay {
  background: linear-gradient(135deg, #1677ff 0%, #00a6fb 100%);
}

.icon-wrapper.wechat {
  background: linear-gradient(135deg, #07c160 0%, #00d976 100%);
}

.icon-wrapper.bank,
.icon-wrapper.cash,
.icon-wrapper.admin {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.payment-info {
  flex: 1;
}

.payment-name {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.payment-desc {
  font-size: 14px;
  color: #7f8c8d;
}

.payment-check {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  width: 24px;
  height: 24px;
  background: #667eea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

/* 确认区域 */
.confirm-section {
  margin-bottom: 32px;
}

.confirm-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.confirm-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.confirm-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.confirm-title .el-icon {
  color: #667eea;
}

.confirm-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.confirm-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 16px;
}

.confirm-row .label {
  color: #64748b;
  font-weight: 500;
}

.confirm-row .amount {
  color: #1e293b;
  font-weight: 600;
  font-size: 18px;
}

.confirm-row .bonus {
  color: #059669;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.confirm-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 16px 0;
}

.confirm-row.total {
  padding: 16px 0 0 0;
  font-size: 20px;
  font-weight: 700;
}

.confirm-row.total .label {
  color: #1e293b;
  font-weight: 700;
}

.confirm-row.total .total-amount {
  color: #667eea;
  font-size: 24px;
}

.recharge-btn {
  width: 100%;
  height: 56px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.recharge-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4) !important;
}

.recharge-btn:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 历史记录区域 */
.history-section {
  margin-bottom: 32px;
}

.history-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.history-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.history-title .el-icon {
  color: #667eea;
}

.record-count {
  background: #f1f5f9;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
}

.refresh-history-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.table-container {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.modern-table {
  border-radius: 12px;
}

.order-id {
  font-family: 'Monaco', 'Menlo', monospace;
  font-weight: 600;
  color: #667eea;
  background: #f0f4ff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.amount-cell .amount-value {
  font-weight: 600;
  color: #1e293b;
  font-size: 16px;
}

.bonus-cell .bonus-value {
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.bonus-cell .no-bonus {
  color: #94a3b8;
  font-weight: 500;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #1e293b;
}

.payment-method .el-icon {
  color: #667eea;
}

.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.completed,
.status-dot.success {
  background: #059669;
}

.status-dot.pending {
  background: #f59e0b;
}

.status-dot.failed {
  background: #dc2626;
}

.status-dot.cancelled {
  background: #6b7280;
}

.status-text {
  font-weight: 500;
  font-size: 14px;
}

.status-text.completed,
.status-text.success {
  color: #059669;
}

.status-text.pending {
  color: #f59e0b;
}

.status-text.failed {
  color: #dc2626;
}

.status-text.cancelled {
  color: #6b7280;
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 14px;
}

.time-cell .el-icon {
  color: #94a3b8;
}

.empty-history {
  padding: 60px 0;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recharge-container {
    padding: 10px;
  }

  .amount-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-header h1 {
    font-size: 24px;
  }

  .balance-amount {
    font-size: 24px;
  }

  .amount-value {
    font-size: 20px;
  }
}

/* 二维码支付对话框样式 */
:global(.qrcode-payment-dialog) {
  .el-message-box {
    width: 400px;
  }

  .el-message-box__content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  :global(.qrcode-payment-dialog) {
    .el-message-box {
      width: 90%;
      max-width: 350px;
    }
  }
}
</style>
